<template>
  <div class="cart-item">
    <span>{{ item.name }}</span>
    <span>￥{{ item.price }}</span>
    <span>
      数量：
      <input type="number" v-model.number="quantity" min="1" @change="updateQuantity">
    </span>
    <button @click="increaseQuantity" class="quantity-btn increase">+</button>
    <button @click="decreaseQuantity" class="quantity-btn decrease">-</button>
    <button @click="removeItem">删除</button>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      quantity: this.item.quantity
    }
  },
  methods: {
    removeItem() {
      this.$store.dispatch('removeFromCart', this.item.id)
    },
    updateQuantity() {
      this.$store.dispatch('updateQuantity', {
        productId: this.item.id,
        quantity: this.quantity
      })
    }
  },
  increaseQuantity() {
    this.$store.dispatch('updateQuantity', {
      productId: this.item.id,
      quantity: this.item.quantity + 1
    })
  },
  decreaseQuantity() {
    if (this.item.quantity > 1) {
      this.$store.dispatch('updateQuantity', {
        productId: this.item.id,
        quantity: this.item.quantity - 1
      })
    }
  }
}
</script>

<style scoped>
.cart-item {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
}
</style>